<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/widget/menu/menu.css" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>下拉菜单 Menu</h2>
                <p>下拉菜单控件, 纯 CSS 打造，无须 JavaScript。例子如下：</p>

                <ul class="aj-css-menu center" style="width:400px;">
                    <li><a href="../index.htm">首页</a></li>
                    <li><a href="#">DHTML</a>
                        <menu>
                            <div>DHTML，即动态 HTML，为详见的页面效果。</div>
                            <ul>
                                <li><a href="msgbox.jsp">对话框</a></li>
                                <li><a href="menu.jsp">菜单</a></li>
                                <li><a href="scrollText.jsp">无缝上下滚动文字</a></li>
                            </ul>
                        </menu>
                    </li>
                    <li><a href="#">切换类</a>
                        <menu>
                            <div>切换类多数为滚动内容的控件</div>
                            <ul>
                                <li><a href="tab.jsp">Tab</a></li>
                                <li><a href="tab.jsp">垂直 Tab</a></li>
                                <li><a href="banner.jsp">广告轮播图 Banner</a></li>
                                <li><a href="lightbox.jsp">Lightbox</a></li>
                            </ul>
                        </menu>
                    </li>
                    <li><a href="#">其他控件类</a>
                        <menu>
                            <div>指日历、HTML 编辑器这类控件</div>
                            <ul>
                                <li><a href="tab.jsp">Tab</a></li>
                                <li><a href="banner.jsp">Banner</a></li>
                                <li><a href="lightbox.jsp">lightbox</a></li>
                            </ul>
                        </menu>
                    </li>
                </ul>

                <div style="clear:both;"></div>
                <p>另有简单一点的 display:none/block 版，没有 CSS3 动画。</p>
                <ul class="aj-css-menu-2 center" style="width:400px;">
                    <li><a href="../index.htm">首页</a></li>
                    <li><a href="#">DHTML</a>
                        <menu>
                            <div>DHTML，即动态 HTML，为详见的页面效果。</div>
                            <ul>
                                <li><a href="msgbox.jsp">对话框</a></li>
                                <li><a href="menu.jsp">菜单</a></li>
                                <li><a href="scrollText.jsp">无缝上下滚动文字</a></li>
                            </ul>
                        </menu>
                    </li>
                    <li><a href="#">切换类</a>
                        <menu>
                            <div>切换类多数为滚动内容的控件</div>
                            <ul>
                                <li><a href="tab.jsp">Tab</a></li>
                                <li><a href="tab.jsp">垂直 Tab</a></li>
                                <li><a href="banner.jsp">广告轮播图 Banner</a></li>
                                <li><a href="lightbox.jsp">Lightbox</a></li>
                            </ul>
                        </menu>
                    </li>
                    <li><a href="#">其他控件类</a>
                        <menu>
                            <div>指日历、HTML 编辑器这类控件</div>
                            <ul>
                                <li><a href="tab.jsp">Tab</a></li>
                                <li><a href="banner.jsp">Banner</a></li>
                                <li><a href="lightbox.jsp">lightbox</a></li>
                            </ul>
                        </menu>
                    </li>
                </ul>

                <div style="clear:both;"></div>
                <p>
                    按照样式要求慢慢修正按钮与显示内容之间的界面融合；需要手动设置内容高度、宽度；内容层叠要调整 z-index 优先级；相关原理文章参考我博客<a
                        href="http://blog.csdn.net/zhangxin09/article/details/17659883" target="_blank">《利用 hover 伪类创建纯 CSS 收缩面板》</a>。
                </p>

                <p>如何解决点击之后马上隐藏面板？由于 js（单击事件） 没有控制 CSS 的 :hover 伪类的方法，故所以必须使用以下技巧：</p>


                <pre class="prettyprint">var menuPanel = el.parentNode;
menuPanel.style.display = 'none';
setTimeout(function(){
    menuPanel.style.display = '';
}, 500);</pre>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>

</body>

</html>